<template>
  <div>
        <div v-for="(item,index) in showFilms" :key=item.id>
            <div>
              <van-nav-bar
              :title="item.title"
              left-text="返回"  
              class="nav_color"
              left-arrow
              @click-left="onClickLeft"
          
            />
            </div>
            <div >           
              <iframe height=202 width=100%  :src="item.url" frameborder=0 scrolling="auto">

              </iframe>
            </div>
          

            <!-- <div v-on:click="playVideo()">
              <video :src="videoSrc" id="videoPlay" class="video"></video>  
            </div> -->

            <!-- ==?rel=0&amp;autoplay=1 -->
          


            <div style="margin-top: 8px;"> 
                <van-tag plain type="primary" size="large">{{item.title}}</van-tag>
                <van-tag plain type="primary" size="large" style="float: right; margin-right: 5px;" @click="toshowjianjie">详细简介</van-tag>
                
                <!-- 简介  最多显示三行 -->
                <div class="van-multi-ellipsis--l3" >
                  <div class="jianjie">
                      {{item.plot}}
                  </div>
                
                </div>

                <!-- 隐藏的简介 -->
                <div  v-show="showjianjie">
                    <van-action-sheet title="简介" v-model="showjianjie">
                    <div class="content">
                        {{item.plot}}
                    </div>
                    </van-action-sheet>
                </div>

            </div>

        </div>


        <div style="margin-top: 20px;;">
            <van-tag mark type="primary" size="medium">更多推荐</van-tag>
        </div>

        <!-- <div v-for="(item,index) in aboutFilms" :key=item.id style="margin: 5px;">            
           <router-link :to="'/showFilms/' + item.id">
                <van-card  
                    desc="描述信息"
                    title="电影名称"
                    centered
                    thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                    >
                <template #tags>
                    <van-tag plain type="danger">标签</van-tag>
                    <van-tag plain type="danger">标签</van-tag>
                </template>
            
                </van-card>
           </router-link>
        </div> -->
        <div  style="margin-top: 5px;">
          
            <div @click="toinitFilm">
                <van-grid :border="false" :column-num="3" class="film_imgs" >
                    <van-grid-item v-for="(film,index) in tuijian" :key="index" class="van-grid-item__content">
                      <router-link :to="'/showFilms/' + film.id">
                        <van-image :src="film.image_url" />
                        <div> {{film.title}} </div>
                      </router-link>
                    </van-grid-item>
                  </van-grid>
            </div>
            
          </div>


       
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: 'ShowFilms',
  data () {
   return {
       showFilms:[],
       aboutFilms:[],
       getType:'1',
       tuijian:[],
       showjianjie: false,
      
   }
  },
  mounted() {
    this.initFilm()  //一进入页面就获取电影数据
    this.getRandomInt(1,10)  //生成随机数
    this.initRecommend() //一进入页面就获取推荐电影数据
    // Toast("稍等一会，电影马上加载完成~")
    Toast.loading({
      message: '稍等一会\n电影马上加载完成...',
      duration: 3000,
    });
  },

  methods:{
    // 生成随机数
    getRandomInt(min, max) {
        // 以下函数返回 min（包含）～ max（包含）之间的数字：
       this.getType = Math.floor(Math.random() * (max - min + 1)) + min
      
    },
    //点击播放
    playVideo(){
            var vdo = document.getElementById("videoPlay");
            vdo.play();
    },
    //刷新视频
    toinitFilm(){
        Toast("稍等一会，电影马上加载完成~")
        this.initFilm()  //根据id获取电影
        this.getRandomInt(10,19)  //生成随机数
        this.initRecommend() //一进入页面就获取推荐电影数据
    },
   
    //根据id获取电影
    initFilm(){
        const _this = this
        this.axios.get("/reqq/film/findId?fid=" + this.id).then(resp=>{
          console.log(resp)
          _this.showFilms = resp.data.data.result
         
        })
    },
    //获取推荐的电影
    initRecommend(){
      const _this = this
        this.axios.get("/reqq/type/findById?typeId=" + this.getType + "&page=0&size=6").then(resp=>{
          console.log(resp)
          _this.tuijian = resp.data.data.result
        })
    },
    //展示简介
    toshowjianjie(){
       this.showjianjie = true
    },
      //返回上一层
    onClickLeft() {
       this.toinitFilm()
       this.$router.go(-1)
    },
   
  },
  props:["id"],
}
</script>

<style scoped>
  /* 标签 */
  /deep/ .van-tag--plain {
    background-color: #424242;
}
 /deep/ .van-tag--primary.van-tag--plain {
    color: #e6e6e6;
}

  /* 视频 */
  .video {
    width: 414px;
    height: 200px;
}
 
   /* 导航栏 */
  .nav_color{
    width: 100%; 
    background-color: #010000;
  
  }
  /* 更多电影 */
  /deep/ .van-nav-bar__title{
    color: #fff;
    font-size: 15px;
  }
  /* 返回 */
  /deep/ .van-nav-bar__text {
       color: #fdfdfd;
  }
    /* 封面简介 */
    .jianjie{
        margin: 2px;
        font-size: 16px;
        margin-top: 4px;
        color: #c2c2c8;
        
    }
    /* 隐藏的简介 */
    .content {
        padding: 16px 16px 200px;
        background-color: #55555b;
        color: #ece6e6;
       
    }
    .van-action-sheet__header {
   
      background-color: #dedede;
    }
    /* 播放电影 */
    .showfilm{
        background-color: rgb(183, 247, 186);
        height: 200px;
    }
   /* 字体 */
   .film_imgs .van-grid-item div{
    font-size: 12px;
    text-align: center;
    color: #F6F1E0;
    height: 25px;
  }
  /* 图片 */
     .film_imgs .van-grid-item .van-image{
      width: 94%;
      height: 160px;
        
    }
      /* 卡片 */
   /deep/ .van-image__img  {
       border-radius: 5px;
    }
    /* 卡片背景 */
    /deep/ .van-grid-item__content {    
      /* background-color: #eee; */
      background-color: #16161A;
      padding: 3px 1px;
    }
</style>